<template>
  <div class="xdetail-container">
    <Headbar/>
    <HeadMenu hasKeys="yes"/>
    <Hungbar/>
    <div class="yh-layout-box xdetail-content" v-if="detail">
      <div class="yh-xdetail-search mt-20">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item style="cursor: pointer"><span @click="routeToPath('/search/xorder')">返回列表</span></el-breadcrumb-item>
          <el-breadcrumb-item>协议订单</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="xdetail-info mt-20">
        <div class="xdetail-left-con fl">
          <img src="@/assets/images/member/xdetail.png"/>
        </div>
        <div class="xdetail-center-con fl">
          <p class="xdetail-title">{{ detail.templateName }}</p>
          <div class="xdetail-size-con">
            <span class="xdetail-size-text">协议订单模板编号</span>
            <span class="xdetail-size-value">{{ detail.templateNo }}</span>
          </div>
          <div class="xdetail-button">

            <a v-if="judgeFileType(detail.protocolUrl) == 'isDoc'" class="xdetail-commonBtn view-btn" target='_black'
             :href="URL.downWordFileUrl+URL.File+detail.protocolUrl">查看协议</a>
            <a v-else-if="judgeFileType(detail.protocolUrl) == 'isImage' || judgeFileType(detail.protocolUrl) == 'isPdf'" class="xdetail-commonBtn view-btn" target="_blank"
             :href="URL.File+detail.protocolUrl">查看协议</a>

            <a v-if="judgeFileType(detail.protocolUrl) == 'isDoc'" class="xdetail-commonBtn download-btn" :href="URL.File+detail.protocolUrl" target="_blank">下载协议</a>
            <a v-if="judgeFileType(detail.protocolUrl) == 'isPdf'" class="xdetail-commonBtn download-btn"
             :href="URL.File+detail.protocolUrl" target="_blank">下载协议</a>
            <a v-if="judgeFileType(detail.protocolUrl) == 'isImage'" target="_blank"
            :href="URL.File+detail.protocolUrl" class="xdetail-commonBtn download-btn">下载协议</a>
          </div>
        </div>
        <div class="xdetail-right-con fl">
          <p class="xdetail-date">{{ fmtDate(detail.createTime, 'ymd') }} 发布</p>
          <div class="xdetail-fr-msg">
            <div class="xdetail-store">
              <img src="@/assets/images/search/search_22.png">
              <span class="xdetail-storeName">{{ detail.factoryName }}</span>
            </div>
            <!-- <div class="approve-label">认证云工厂</div> -->
            <div class="xdetail-address">
              <img src="@/assets/images/search/search_24.png">
              <div class="xdetail-address-detail">
                {{ detail.factoryAddr }}
              </div>
            </div>
          </div>
          <div class="collect-item">
            <!-- <img class="collect-ico" src="@/assets/images/member/collect.png"><span class="collect-state">收藏(100)</span> -->
          </div>
        </div>
      </div>
      <div class="xdetail-deal-wrap mt-20 bg-white">
        <div class="xdetail-order-item">
          <div class="xdetail-total fl">
            <div class="order-total-item">订单总金额：<span class="fontRed">￥<span class="total-money">{{ detail.amount }}</span></span></div>
            <div class="stock-up-time">备货时间：<span class="timeNum">{{ detail.stockupTime }}天</span></div>
          </div>
          <div class="place-item fr">
            <span @click="createXorder()" class="place-con enterPlace-btn cursor">
              <img src="@/assets/images/member/place.png"/> 进入下单
            </span>
            <span @click="handleChat()" class="place-con contact-btn cursor">
              <img src="@/assets/images/member/contact.png" /> 联系卖家
            </span>
          </div>
        </div>
        <div class="xdetail-agreement-item">
          <div class="xdetail-agreement-tips">
            <img src="@/assets/images/xorder/icon-idea.png" alt="">
            仅供参考，以协议内容为准</div>
          <div class="xdetail-agreement-ul">
            <div class="xdetail-agreement-list mb-20" v-for="(item, idx) in detail.protocolGoodsList">
              <span class="xdetail-sort fl"><span class="xdetail-sort-rank">0{{idx+1}}</span></span>
              <span class="xdetail-pdTitle fl"><span class="xdetail-title-t">{{ item.goodsName }}</span></span>
              <span class="xdetail-unit fl">￥{{ item.goodsPrice }}/{{ item.goodsUnit }}</span>
              <span class="xdetail-batch fl">{{ item.quantity }} 起批</span>
            </div>
            <!-- <div class="xdetail-more"><span class="view-more-btm cursor">查看更多</span></div> -->
          </div>
        </div>
        <div class="xdetail-agreement-trait mt-20">
          <div class="xdetail-trait-header">协议订单特点</div>
          <div class="xdetail-trait-con">
            <div class="xdetail-trait-bg">
              <img src="~assets/images/search/search_26.png">
              <img src="~assets/images/search/search_27.png">
              <img src="~assets/images/search/search_28.png">
            </div>
            <div class="xdetail-trait-content">
              <div class="xdetail-trait-list">
                <div class="xdetail-trait-title">省时省力</div>
                <p class="xdetail-trait-text">使用协议订单下单，把工作甩给供应商，节省采购时间，高效</p>
                <p class="xdetail-trait-text">率工作的同时还能泡茶看报！</p>
              </div>
              <div class="xdetail-trait-list">
                <div class="xdetail-trait-title">毫无压力</div>
                <p class="xdetail-trait-text">使用协议订单下单，平台为您做担保，银行为您的资金</p>
                <p class="xdetail-trait-text">保驾护航，无压力采购的同时还能睡个好觉！</p>
              </div>
              <div class="xdetail-trait-list">
                <div class="xdetail-trait-title">售后无忧</div>
                <p class="xdetail-trait-text">使用协议订单下单，采购商确认到货验货后7天内解冻供应商</p>
                <p class="xdetail-trait-text">资金，充足时间验货的同时售后还能有保障！</p>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <Footbars/>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="720px">
      <span>
        <iframe v-if="detail" :src="URL.File+detail.protocolUrl" width="660px" height="400px"></iframe>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import Headbar from '@/components/Layouts/Headbar'
  import HeadMenu from '@/components/Layouts/HeadMenu'
  import Hungbar from '@/components/Layouts/Hungbar'
  import Footbars from '@/components/Layouts/Footbars'
  import { getOpenXdetail, createXorder } from '@/api/xorder'

  export default {
    name: 'SearchXorderDetail',
    components: {
      Headbar,
      HeadMenu,
      Hungbar,
      Footbars,
    },
    data() {
      return {
        dialogVisible: false,
        detail: null,
      }
    },
    created() {
      this.getDetail();
    },
    methods: {
      // 联系买家提示
      handleChat() {
        this.$message({
          message: '供应商暂未开启客服功能',
          type: 'warning'
        });
      },
      // 获取详情
      getDetail() {
        getOpenXdetail({id: this.$route.params.id}).then(res => {
            this.detail = res.data;
        })
      },
      // 创建协议订单
      createXorder() {
        if(!this.getUserInfo()){
          this.routeToPath('/login?redirect='+this.$router.history.current.fullPath)
          return
        }
        const params = {
          source: 5,
          orderType: 2,
          memberAddressId: 0,
          provinceId: 0,
          payType: 1,
          settleProtocolQueryList: [{
            factoryId: this.detail.factoryId,
            factoryName: this.detail.factoryName,
            transportType: 1,
            invoiceTemplateId: 0,
            taxContent: '',
            memo: '',
            settleProtocolTemplateQueryList: [{
              cartId: null,
              protocolId: this.$route.params.id,
              quantity: 1,
            }]
          }]
        }
        createXorder(params).then(res=>{
          if(res.code == 200){
            this.routeToPath('/member/xorder/confirm?orderNo='+res.data.orderNo)
          }else{
            this.actionsAfter(res.msg, 'error')
          }

        })
      }
    }

}
</script>
<style lang="scss" scoped>
a{
  text-decoration: none;
}
.xdetail-content{
  .yh-xdetail-search{
    height: 32px;
    line-height: 32px;
  }
  .xdetail-info{
    width: 100%;
    height: 240px;
    border-radius: 10px;
    background: #fff;
    .xdetail-left-con{
      width: 240px;
      height: 240px;
      background: #DBE8F4;
      text-align: center;
      border-radius: 10px 0 0 10px;
      box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.05);
      img{
        margin-top: 50px;
      }
    }
    .xdetail-center-con{
      width: 610px;
      margin: 0 20px;
      .xdetail-title{
        font-size: 18px;
        color: #333;
        margin-top: 30px;
        margin-bottom: 27px;
        font-weight: bold;
        line-height: 30px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .xdetail-size-con{
        font-size: 14px;
        color: #666;
        .xdetail-size-text{

        }
        .xdetail-size-value{
          margin-left: 30px;
        }
      }
      .xdetail-button{
        margin-top: 35px;
        font-size: 14px;
        .xdetail-commonBtn{
          display: inline-block;
          width: 120px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          border: 1px solid #255B8B;
          border-radius: 10px;
        }
        .view-btn{
          margin-right: 18px;
        }
        .download-btn{
          background: #255B8B;
          color: #fff;
        }
      }
    }
    .xdetail-right-con{
      .xdetail-date{
        color: #aaa;
        font-size: 14px;
        height: 20px;
        margin: 30px 0 15px 0;
        width: 100%;
        text-align: right;
      }
      .xdetail-fr-msg{
        width: 240px;
        height: 100px;
        background: #F7F7F7;
        color: #888;
        font-size: 14px;
        padding: 20px;
        .xdetail-store{
          img{
            vertical-align: 5px;
            margin-right: 5px;
          }
          .xdetail-storeName{
            display: inline-block;
            max-width: 220px;
            height: 25px;
            line-height: 25px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .approve-label{
          display: inline-block;
          background: #E2ECF5;
          color: #85A7C8;
          font-size: 12px;
          padding: 2px 5px;
          border-radius: 10px;
          margin-left: 20px;
        }
        .xdetail-address{
          margin-top: 15px;
          img{
            vertical-align: -2px;
            margin-right: 5px;
          }
          .xdetail-address-detail{
            display: inline-block;
            width: 220px;
            vertical-align: top;
            line-height: 20px;
          }
        }
      }
      .collect-item{
        text-align: right;
        height: 30px;
        line-height: 30px;
        .collect-ico{

        }
        .collect-state{
          color: #888;
          font-size: 14px;
          margin-left: 8px;
        }
      }
    }
  }
  .xdetail-deal-wrap{
    padding: 30px;
    border-radius: 10px;
    .xdetail-order-item{
      overflow: hidden;
      zoom: 1;
      margin-bottom: 20px;
      .xdetail-total{
        font-size: 14px;
        color: #666;
        .order-total-item{
          margin-bottom: 15px;
          .fontRed{
            color: #D60937;
            font-size: 14px;
            .total-money{
              font-size: 18px;
              font-weight: bold;
            }
          }
        }
        .stock-up-time{
          letter-spacing: 3px;
          padding-left: 2px;
        }
      }
      .place-item{
        .place-con{
          display: inline-block;
          width: 180px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          border-radius: 10px;
          font-size: 18px;
          color: #fff;
          img{
            vertical-align: middle;
          }
        }
        .enterPlace-btn{
          background: #3A93DB;
          margin-right: 40px;
          transition: all .3s;
          &:hover{
            opacity: .8;
          }
        }
        .contact-btn{
          background: #37C759;
          transition: all .3s;
          &:hover{
            opacity: .8;
          }
        }
      }
    }
    .xdetail-agreement-item{
      // width: 100%;
      background: #F7F7F7;
      border: 1px solid #E9E9E9;
      padding: 20px;
      .xdetail-agreement-tips{
        font-size: 14px;
        color: #888;
        margin-bottom: 15px;
      }
      .xdetail-agreement-ul{

        .xdetail-agreement-list{
          height: 80px;
          line-height: 80px;
          background: #fff;
          box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.05);
          border-radius:6px;
          .xdetail-sort{
            display: inline-block;
            width: 30px;
            height: 34px;
            background: url('~assets/images/search/search_25.png') no-repeat;
            position: relative;
            margin: 25px 20px 0;

            .xdetail-sort-rank{
              display: inline-block;
              width: 30px;
              height: 34px;
              line-height: 34px;
              text-align: center;
              position: absolute;
              top: 0;
              left: 0;
              font-size: 14px;
              color: #fff;
            }
          }
          .xdetail-pdTitle{
            width: 525px;
            height: 80px;
            color: #333;
            font-size: 14px;
            .xdetail-title-t{
              display: inline-block;
              max-width: 540px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .xdetail-unit{
            display: inline-block;
            width: 250px;
            height: 100%;
            text-align: center;
            color: #888;
            font-size: 14px;
          }
          .xdetail-batch{
            display: inline-block;
            width: 250px;
            height: 100%;
            text-align: center;
            color: #888;
            font-size: 14px;
          }
        }
        .xdetail-more{
          text-align: center;
          .view-more-btm{
            color: #888;
          }
        }
      }
    }
    .xdetail-agreement-trait{
      background: #f7f7f7;
      border: 1px solid #E9E9E9;
      text-align: center;
      padding-bottom: 20px;
      .xdetail-trait-header{
        font-size: 24px;
        color: #333;
        font-weight: bold;
        width: 170px;
        margin: 30px auto;
        position: relative;
      }
      .xdetail-trait-header:before{
        content: "";
        display: inline-block;
        width: 25px;
        height: 2px;
        background: #333;
        position: absolute;
        left: -25px;
        top: 15px;
      }
      .xdetail-trait-header:after{
        content: "";
        display: inline-block;
        width: 25px;
        height: 2px;
        background: #333;
        position: absolute;
        right: -25px;
        top: 15px;
      }
      .xdetail-trait-con{
        position: relative;
        .xdetail-trait-bg{
          img{
            vertical-align: bottom;
          }
        }
        .xdetail-trait-content{
          position: absolute;
          left: 0;
          top: 0;
          .xdetail-trait-list{
            text-align: left;
            margin-left: 465px;
            .xdetail-trait-title{
              font-size: 30px;
              color: #FF2D2D;
              margin: 0px 0 25px;
              padding-top: 60px;
              font-weight: bold;
            }
            .xdetail-trait-text{
              font-size: 16px;
              color: #333;
              margin: 0;
              line-height: 25px;
            }
          }
          .xdetail-trait-list:first-child{
            height: 226px;

          }
          .xdetail-trait-list:nth-child(2){
            height: 240px;
            margin-left: 165px;
          }
          .xdetail-trait-list:nth-child(3){
            height: 227px;

          }
        }
      }

    }
  }
}
</style>
<style lang="scss">
.yh-xdetail-search{
  .el-breadcrumb{
    height: 32px;
    line-height: 32px;
    color: #888;
  }
}

</style>
